﻿<MCard Class="mx-auto"
       MaxWidth="500">
    <MToolbar Color="teal"
              Dark>
        <MAppBarNavIcon></MAppBarNavIcon>

        <MToolbarTitle>Topics</MToolbarTitle>

        <MSpacer></MSpacer>

        <MButton Icon>
            <MIcon>mdi-dots-vertical</MIcon>
        </MButton>
    </MToolbar>

    <MList>
        @foreach (var item in items)
        {
            <MListGroup
                @bind-Value="item.Active"
                PrependIcon="@item.Action"
                NoAction>
                <ActivatorContent>
                    <MListItemContent>
                        <MListItemTitle>@item.Title</MListItemTitle>
                    </MListItemContent>
                </ActivatorContent>

                <ChildContent>
                    @foreach (var subItem in item.Items)
                    {
                        <MListItem
                            Value="subItem.Title">
                            <MListItemContent>
                                <MListItemTitle>@item.Title</MListItemTitle>
                            </MListItemContent>
                        </MListItem>
                    }
                </ChildContent>
            </MListGroup>
        }
    </MList>
</MCard>

@code {

    List<Item> items = new List<Item>()
    {
        new Item()
        {
            Action = "mdi-ticket",
            Items = new List<Item>() {new Item("List Item")},
            Title = "Attractions"
        },
        new Item()
        {
            Action = "mdi-silverware-fork-knife",
            Active = true,
            Items = new List<Item>() {new Item("Breakfast & brunch"), new Item("New American"), new Item("Sushi")},
            Title = "Dining"
        },
        new Item()
        {
            Action = "mdi-school",
            Items = new List<Item>() {new Item("List Item")},
            Title = "Education"
        },
        new Item()
        {
            Action = "mdi-run",
            Items = new List<Item>() {new Item("List Item")},
            Title = "Family"
        },
        new Item()
        {
            Action = "mdi-bottle-tonic-plus",
            Items = new List<Item>() {new Item("List Item")},
            Title = "Health"
        },
        new Item()
        {
            Action = "mdi-content-cut",
            Items = new List<Item>() {new Item("List Item")},
            Title = "Attractions"
        },
        new Item()
        {
            Action = "mdi-tag",
            Items = new List<Item>() {new Item("List Item")},
            Title = "Attractions"
        },
    };

    class Item
    {
        public string Title { get; set; }

        public string Action { get; set; }

        public bool Active { get; set; }

        public List<Item> Items { get; set; } = new List<Item>();

        public Item()
        {
        }

        public Item(string title)
        {
            Title = title;
        }
    }

}